<template>
  <div class="umo-container">
    <div class="body-container">
      <main class="editor-container relative">
        <umo-editor
          v-if="showEditor"
          ref="editorRef"
          v-bind="options"
          @created="onCreated"
          @changed:selection="onChangedSelection"
          @focus="onFocus"
          @blur="onBlur"
          @saved="onSaved"
          @destroy="onDestroy"
        >
        </umo-editor>
      </main>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { UmoEditor } from '@umoteam/editor'
import { nanoid } from 'nanoid'

const { t } = useI18n()
const locale = {
  value: 'zh-CN'
}
const showEditor = ref(false)
let initEventCount = 0
let timmer
let loading = ref(false)
const props = defineProps({
  content: {
    type: String,
    required: false,
    default: ''
  },
  editorKey: {
    type: String,
    required: false,
    default: 'kms'
  },
  defaultMode: {
    type: String,
    required: false,
    default: 'classic'
  }
})

const emitter = defineEmits(['saved', 'showAi'])

const editorRef = ref(null)

const focusing = ref(false)
const options = ref({})

const useLogger = (eventName, ...content) => {
  // const time = new Date().toLocaleTimeString();
  // console.info(
  //   `%cUmo Editor%c${time} %c[${eventName}]`,
  //   `background: #015beb;
  //   color: #fff;
  //   border-radius: 2px;
  //   padding: 2px 5px;
  //   margin-right: 6px;`,
  //   `color: rgba(0,0,0,.5)`,
  //   `color: #069f69;
  //   font-weight: bold`,
  //   ...content
  // );
}

const onCreated = async (editor) => {
  useLogger('onCreated', t('onCreated'), '{ editor }')
}
const onChangedSelection = (editor) => {
  useLogger('onChangedSelection', t('onChanged'), '{ editor }')
}
const onFocus = () => {
  focusing.value = true
  useLogger('onFocus', t('onFocus'), '{ editor, event }')
}
const onBlur = () => {
  focusing.value = false
  useLogger('onBlur', t('onBlur'), '{ editor, event }')
}
const onSaved = () => {
  useLogger('onSaved', '{ editor, event }')
}
const onDestroy = () => {
  useLogger('onDestroy', t('onDestroy'))
}

onMounted(() => {
  options.value = {
    locale: locale.value,
    editorKey: props.editorKey,
    toolbar: {
      defaultMode: props.defaultMode
    },
    document: {
      title: 'Document',
      enableMarkdown: false,
      enableSpellcheck: false,
      placeholder: {
        zh_CN: '请输入文档内容...'
      },
      readOnly: true,
      autofocus: false,
      autoSave: {
        enabled: false
      }
    },
    page: {
      showBreakMarks: false
    },
    cdnUrl: 'https://unpkg.com/@umoteam/editor-external@latest',
    onSave(content, page, document) {
      return new Promise((resolve) => {
        clearTimeout(timmer)
        timmer = setTimeout(() => {
          resolve(true)
        }, 400)
      })
    },
    async onFileUpload(file) {
      if (!file) throw new Error(t('noUploadFile'))
      let formData = new FormData()
      formData.append('file', file)
      //  const res = await uploadFileNameRandom(formData);
      //  return {
      //    id: nanoid(6),
      //    url: res.data.filePath
      //  };
    }
  }
  showEditor.value = true
})
onUnmounted(() => {
  clearTimeout(timmer)
  loading.value = false
})

function isContentChanged() {
  // if (!window.editor) return false;
  // return window.editor?.state?.history$?.done?.eventCount !== initEventCount;
}

defineExpose({ isContentChanged })
</script>

<style lang="less" scoped>
@keyframes waiting {
  0% {
    content: '';
  }

  25% {
    content: '.';
  }

  50% {
    content: '..';
  }

  75% {
    content: '...';
  }

  100% {
    content: '';
  }
}

.umo-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 680px;
  min-height: 540px;
  overflow: auto;

  .body-container {
    display: flex;
    height: 100%;
  }

  .editor-container {
    position: relative;
    flex: 1;
    min-width: 480px;

    .file_loading {
      width: 120px;
      display: flex;
      align-content: center;

      img {
        width: 24px;
        height: 24px;
        margin-right: 6px;
      }

      &::after {
        content: '';
        display: inline-block;
        animation: waiting 1.2s infinite linear;
      }
    }
  }
}
</style>
